import { FC, useState, useEffect, useMemo } from 'react';
import { useHistory } from 'react-router';
import classnames from 'classnames';
import styles from './style.less';
import Map from '@/components/Map';
import TabList from '@/components/TabList';
import SimpleList from '@/components/SimpleList';
import ImportantCompany from '@/components/ImportantCompany';

import { yjtab, yjtab_second, lytab } from './config';
import MixBarLine from '@/components/MixBarLine';

import { useModel } from 'umi';

import _lodash from 'lodash';

const first_list_columns: any[] = [
  {
    title: '类型',
    dataIndex: 'YJQF',
    align: 'center',
    width: 95,
    render: (data: any) => (
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'flex-start',
          color: '#FDFF00',
        }}
      >
        {data.YJQF}
      </div>
    ),
  },
  {
    title: '内容',
    dataIndex: 'info',
    width: 575,
    render: (data: any) => (
      <p
        style={{
          whiteSpace: 'normal',
          wordBreak: 'break-word',
          textAlign: 'left',
          marginBottom: 0,
          padding: '5px 0',
        }}
      >
        <span>{data.info}</span>
        {
          <span
            style={{
              color: '#FDFF00',
              marginBottom: 0,
              display: 'block',
            }}
          >
            请予关注
            <span style={{ paddingLeft: 10 }}>[{data.YJSJ || ''}]</span>
          </span>
        }
      </p>
    ),
  },
];
const second_columns: any[] = [
  {
    title: '园区名称',
    dataIndex: 'name',
    width: 315,
    align: 'center',
  },
  {
    title: '同比',
    dataIndex: 'tb',
    width: 120,
    align: 'center',
    render: (data: any) => (
      <span style={{ color: '#FDFF00' }}>{data.tb ? data.tb + '%' : '-'}</span>
    ),
  },
  {
    title: '模型预测',
    dataIndex: '',
    render: (data: any) => (
      <p
        style={{
          cursor: 'pointer',
          marginBottom: 0,
        }}
        onClick={() => {
          console.log(data);
        }}
      >
        查看详情
      </p>
    ),
  },
];
const importantTab: any[] = [
  {
    title: '重点关注园区',
    key: 0,
  },
  {
    title: '重点关注楼宇',
    key: 1,
  },
];
const fifth_columns: any[] = [
  {
    title: '楼宇名称',
    dataIndex: 'name',
    width: 270,
    align: 'center',
  },
  {
    title: '同比',
    dataIndex: 'tb',
    width: 105,
    align: 'center',
    render: (data: any) => (
      <span style={{ color: '#FDFF00' }}>{data.tb ? data.tb + '%' : '-'}</span>
    ),
  },
  {
    title: '模型预测',
    dataIndex: '',
    width: 90,
    render: (data: any) => (
      <p
        style={{
          cursor: 'pointer',
          marginBottom: 0,
        }}
        onClick={() => {
          console.log(data);
        }}
      >
        查看详情
      </p>
    ),
  },
];
const Yqyj: FC = () => {
  const history = useHistory();
  const [currentImportant, setCurrentImportant] = useState<number>(0);
  const [typeIndex, setTypeIndex] = useState<number>(0);
  const [rankIndex, setRankIndex] = useState<number>(0);
  const [houseIndex, setHouseIndex] = useState<number>(0);
  const {
    yjList,
    getYjList,
    rankList,
    getRankList,
    marker,
    getMarker,
    removeMarker,
    houseList,
    getHouseList,
  } = useModel('yqyj');

  const toGetYjList = () => {
    const item = yjtab[typeIndex];
    if (item) {
      getYjList({
        YJQF: item.type,
      });
    }
  };
  const toGetRankList = () => {
    const item = yjtab_second[rankIndex];
    if (item) {
      getRankList({
        type: item.type,
      });
    }
  };
  const toGetHouseList = () => {
    const item = lytab[houseIndex];
    if (item) {
      getHouseList({
        type: item.type,
      });
    }
  };

  useEffect(() => {
    toGetYjList();
    toGetRankList();
    toGetHouseList();
  }, []);

  useEffect(() => {
    toGetYjList();
    removeMarker();
  }, [typeIndex]);

  useEffect(() => {
    toGetRankList();
  }, [rankIndex]);

  useEffect(() => {
    toGetHouseList();
  }, [houseIndex]);

  const renderMixBarLine = useMemo(() => {
    const data = yjList?.YJCYData;
    if (data) {
      return [
        {
          name: '园区预警条数',
          type: 'bar',
          data: data.barData1 || [],
        },
        {
          name: '预警园区数',
          type: 'line',
          data: data.lineData1 || [],
        },
        {
          name: '楼宇预警条数',
          type: 'bar',
          data: data.barData2 || [],
        },
        {
          name: '预警楼宇数',
          type: 'line',
          data: data.lineData2 || [],
        },
      ];
    }
    return [];
  }, [yjList]);

  const renderImportantData = useMemo(() => {
    if (yjList?.stressEnterpriseData?.data) {
      const all = yjList.stressEnterpriseData.data;
      const group = _lodash.groupBy(all, 'FollowObject');
      return [group['重点关注园区'] || [], group['重点调研楼宇'] || []];
    }
    return [[], []];
  }, [yjList]);

  return (
    <div className={styles.yj_container}>
      <div className={styles.map_container}>
        <Map title="预警企业分布图" marker={marker}></Map>
      </div>
      <div className={styles.middle_container}>
        <div className={styles.first}>
          <div
            className={styles.first_list}
            style={{
              paddingTop: 10,
              height: 'auto',
            }}
          >
            <TabList
              size="3x"
              dataSource={yjtab}
              currentIndex={typeIndex}
              onChange={(v, index) => {
                setTypeIndex(index);
              }}
            />
            <div
              className={styles.first_list_table}
              style={{
                height: 400,
                marginTop: 20,
              }}
            >
              <SimpleList
                width={690}
                height={400}
                columns={first_list_columns}
                dataSource={yjList?.warningInfo || []}
                rowStyle={{
                  height: 'auto',
                }}
                hover
                hideHead
                selected={(v: any) => {
                  console.log(v);
                  getMarker({
                    ids: v.ids,
                  });
                }}
              ></SimpleList>
            </div>
          </div>
        </div>
        <div className={styles.second}>
          <div className={styles.title}>
            <span>企业预警指标排行榜</span>
          </div>
          <div
            style={{
              marginTop: 10,
            }}
          >
            <TabList
              size="2x"
              dataSource={yjtab_second}
              onChange={(v, index) => {
                setRankIndex(index);
              }}
              hasBg
              currentIndex={rankIndex}
            />
            <div
              style={{
                width: 690,
                margin: '0 auto',
              }}
            >
              <SimpleList
                width={690}
                height={288}
                columns={second_columns}
                dataSource={rankList}
                rowStyle={{
                  height: 48,
                }}
                hover
                sortNumber
                sortStyle={{ width: 95 }}
                sortText="排名"
                selected={(v: any) => {
                  console.log(v);
                }}
              ></SimpleList>
            </div>
          </div>
        </div>
      </div>
      <div className={styles.right_container}>
        <div className={styles.yq_third}>
          <div className={styles.title}>
            <span>园区楼宇预警分析</span>
          </div>
          <div
            style={{
              width: 535,
              height: 195,
              margin: '0 auto',
              marginTop: 10,
            }}
          >
            <MixBarLine
              width={535}
              height={195}
              category={yjList?.YJCYData?.name || []}
              dataSource={renderMixBarLine}
              colors={[
                '#CD6CFF',
                'rgba(231,128,109,.5)',
                '#FFB718',
                'rgba(147,253,255,.5)',
              ]}
              leftUnit={{ text: '园区楼宇数量', suffix: '' }}
              rightUnit={{ text: '预警条数', suffix: '' }}
            />
          </div>
        </div>
        <div className={styles.yq_fourth}>
          <div className={styles.title}>
            <div className={styles.fifth_tab_warp}>
              {importantTab.map((item) => (
                <div
                  className={classnames(
                    styles.tab_item,
                    item.key === currentImportant ? styles.actived : null,
                  )}
                  key={item.key}
                  onClick={() => setCurrentImportant(item.key)}
                >
                  <span>{item.title}</span>
                </div>
              ))}
            </div>
          </div>
          <div style={{ marginTop: 10 }}>
            {currentImportant === 0 && (
              <ImportantCompany
                height={155}
                dataSource={renderImportantData[0]}
                onCompanyClick={(v: any) => {
                  window.sessionStorage.setItem('companyName', v['B102']);
                  window.sessionStorage.setItem('companyId', v.id);
                  window.sessionStorage.setItem(
                    'backUrl',
                    window.location.href,
                  );
                  history.push('/qyhx/index1');
                }}
              />
            )}
            {currentImportant === 1 && (
              <ImportantCompany
                height={155}
                dataSource={renderImportantData[1]}
                onCompanyClick={(v: any) => {
                  window.sessionStorage.setItem('companyName', v['B102']);
                  window.sessionStorage.setItem('companyId', v.id);
                  window.sessionStorage.setItem(
                    'backUrl',
                    window.location.href,
                  );
                  history.push('/qyhx/index1');
                }}
              />
            )}
          </div>
        </div>
        <div className={styles.yq_fifth}>
          <div className={styles.title}>
            <span>楼宇预警指标排行榜</span>
          </div>
          <div
            style={{
              marginTop: 10,
            }}
          >
            <TabList
              size="2x"
              dataSource={lytab}
              onChange={(v, index) => {
                console.log(index);
                setHouseIndex(index);
              }}
              hasBg
              smallBg
              currentIndex={houseIndex}
            />
            <div
              style={{
                width: 524,
                margin: '0 auto',
              }}
            >
              <SimpleList
                width={524}
                height={288}
                columns={fifth_columns}
                dataSource={houseList}
                rowStyle={{
                  height: 48,
                }}
                hover
                sortText="排名"
                sortNumber
                sortStyle={{ width: 60 }}
                selected={(v: any) => {
                  console.log(v);
                }}
              ></SimpleList>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Yqyj;
